<template>
    <div>
        <hr>
        <p>default</p>
        <x-button>submit</x-button>
        <x-button type="primary">primary</x-button>
        <x-button type="warn">Delete</x-button>
        <p>link</p>
        <x-button type="primary" link="/demo">Go to demo list</x-button>
        <x-button type="default" link="BACK">Back</x-button>
        <p>action type</p>
        <x-button type="primary" action-type="button">submit</x-button>
        <x-button type="warn" action-type="reset">reset</x-button>
        <p>loading</p>
        <x-button type="default" show-loading>submit</x-button>
        <x-button type="primary" show-loading>submit</x-button>
        <x-button type="warn" show-loading>submit</x-button>
        <p>mini</p>
        <p><x-button mini>submit</x-button>
        <x-button mini type="primary">primary</x-button>
        <x-button mini type="warn">Delete</x-button></p>
        <p><x-button mini plain>submit</x-button>
        <x-button mini plain type="primary">primary</x-button>
        <x-button mini plain type="warn">primary</x-button></p>
        <p>plain</p>
        <x-button plain>submit</x-button>
        <x-button plain type="primary">primary</x-button>
        <x-button plain type="warn">warn</x-button>
        <p>you can customize styles</p>
        <x-button plain type="primary" style="border-radius:99px;">primary</x-button>
        <x-button plain type="primary" class="custom-primary-red">primary</x-button>
        <p>disabled</p>
        <x-button disabled>disable submit</x-button>
        <x-button type="primary" disabled>disable primary</x-button>
        <x-button type="warn" disabled>disable Delete</x-button>

        <x-button mini disabled>disable mini submit</x-button>
        <x-button mini type="primary" disabled>disable mini primary</x-button>
        <x-button mini type="warn" disabled>disable mini Delete</x-button>

        <x-button plain disabled>disable plain</x-button>
        <x-button plain type="primary" disabled>disable plain primary</x-button>

        <p>use :text and :disabled</p>
        <x-button :text="submit001" :disabled="disable001" @click.native="processButton001" type="primary"></x-button>

        <p>combined with flexbox</p>
        <flexbox>
            <flexbox-item>
                <x-button type="primary">primary</x-button>
            </flexbox-item>
            <flexbox-item>
                <x-button type="warn">Delete</x-button>
            </flexbox-item>
        </flexbox>
        <p>combined with flexbox</p>
        <flexbox>
            <flexbox-item>
                <x-button type="default">default</x-button>
            </flexbox-item>
            <flexbox-item>
                <x-button type="primary">primary</x-button>
            </flexbox-item>
            <flexbox-item>
                <x-button type="warn">Delete</x-button>
            </flexbox-item>
             <flexbox-item>
                <x-button type="info">Delete</x-button>
            </flexbox-item>
        </flexbox>
        <box gap="10px 10px">
            <p>iOS Gradients(v2.7.4)</p>
            <x-button :gradients="['#1D62F0', '#19D5FD']">iOS Gradients</x-button>
            <x-button :gradients="['#A644FF', '#FC5BC4']">iOS Gradients</x-button>
            <x-button :gradients="['#FF2719', '#FF61AD']">iOS Gradients</x-button>
            <x-button :gradients="['#6F1BFE', '#9479DF']">iOS Gradients</x-button>
            <x-button :gradients="['#FF5E3A', '#FF9500']">iOS Gradients</x-button>
        </box>
    </div>
</template>
<script>
import { XButton, Box, Flexbox, FlexboxItem } from 'vux';
export default {
    /*
        v2.7.4版本支持：gradients属性值
    
    */
    name : 'vux-x-button',
    components : {
        XButton,
        Box,
        Flexbox,
        FlexboxItem
    },
    data(){
        return {
            submit001: 'click me',
            disable001: false
        }
    },
    methods:{
        processButton001(){
            alert('干嘛呢？');
            this.submit001 = 'processing';
            this.disable001 = true;

        }
    }
}
</script>
<style>


</style>


